import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../global.css';
import { toggleStyle } from '../toggle/toggle.css';

const PADING = '1.4em';

export const fieldStyle = style({
	display: 'flex',
	position: 'relative',
	flexDirection: 'row',
	alignItems: 'center',
	padding: `1em ${PADING}`,
	minHeight: '4em',
	cursor: 'default',
	selectors: {
		'&:after': {
			content: ' ',
			boxSizing: 'border-box',
			display: 'block',
			position: 'absolute',
			left: PADING,
			right: PADING,
			bottom: 0,
			borderBottom: `1px solid ${vars.color.border}`,
		},
		'&[type^=subject]': {
			padding: `1em ${PADING}`,
		},
		'&[type$=entry],&.clickable': {
			cursor: 'pointer',
		},
		'&[type$=entry]:active,&.clickable:active': {
			backgroundColor: vars.color.activeBlur,
		},
	},
});

globalStyle(`${fieldStyle} [name=label]`, {
	display: 'flex',
	alignItems: 'center',
	minWidth: '6em',
	paddingRight: '1em',
	userSelect: 'none',
});

globalStyle(`${fieldStyle} label`, {
	color: vars.color.primaryText,
	whiteSpace: 'nowrap',
	wordBreak: 'keep-all',
	textOverflow: 'ellipsis',
	overflow: 'hidden',
	cursor: 'inherit',
});

globalStyle(`${fieldStyle} ${toggleStyle}`, {
	marginLeft: '1em',
});

globalStyle(`${fieldStyle} div[name=value]`, {
	flex: 1,
	textAlign: 'right',
	lineHeight: '1.7em',
	whiteSpace: 'nowrap',
	wordBreak: 'keep-all',
	textOverflow: 'ellipsis',
	overflow: 'hidden',
});

globalStyle(`${fieldStyle} div[name=box]`, {
	flex: 1,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	width: 0,
	userSelect: 'none',
});

globalStyle(`${fieldStyle} svg[name=icon]`, {
	width: '2em',
	height: '2em',
	marginRight: '1em',
});

globalStyle(`${fieldStyle}[type^=subject] svg[name=icon]`, {
	width: '3em',
	height: '3em',
	flexShrink: 0,
	marginRight: '1em',
});

// globalStyle(`${fieldStyle}[type^=subject] label`, {
// 	fontWeight: 'bold',
// });

globalStyle(`${fieldStyle}[type^=subject] div[name=value]`, {
	textAlign: 'left',
	color: vars.color.secondaryText,
});

globalStyle(`${fieldStyle} svg[name=arrow]`, {
	width: '1.2em',
	height: '1.2em',
	fill: vars.color.info,
	marginLeft: '0.5em',
});

globalStyle(`${fieldStyle} input`, {
	flex: 1,
	textAlign: 'right',
	background: 'transparent',
	border: 'none',
	outline: 'none',
	minWidth: 0,
	width: 0,
	color: vars.color.regularText,
	fontSize: '1rem',
});
globalStyle(`${fieldStyle} input[disabled]`, {
	color: vars.color.disabledText,
});
